import {PlusOutlined, EditOutlined, EyeOutlined, DeleteOutlined} from '@ant-design/icons';
import {Button, message, Modal} from 'antd';
import React, {useRef, useState} from 'react';
import {PageContainer} from '@ant-design/pro-layout';
import type {ActionType, ProColumns} from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import CoachForm from './components/CoachForm';
import CoachDetail from './components/CoachDetail';
import {addCoachAPI, deleteCoachAPI, pageCoachAPI, updateCoachAPI} from "@/pages/coach-manager/service";

const CoachManager: React.FC = () => {
  const actionRef = useRef<ActionType>();
  const [detailVisible, setDetailVisible] = useState(false);
  const [currentCoach, setCurrentCoach] = useState<API.ICoach | undefined>(undefined);

  const columns: ProColumns<API.ICoach>[] = [
    {
      title: '姓名',
      dataIndex: 'name',
    },
    {
      title: '性别',
      dataIndex: 'gender',
      width: 80,
      valueEnum: {
        0: {text: '男'},
        1: {text: '女'},
      },
    },
    {
      title: '状态',
      dataIndex: 'status',
      valueEnum: {
        1: {text: '在职', status: 'Success'},
        2: {text: '休假', status: 'Warning'},
        3: {text: '离职', status: 'Error'},
      },
    },
    {
      title: '联系电话',
      dataIndex: 'phone',
      hideInSearch: true,
    },
    {
      title: '身份证号',
      dataIndex: 'idCard',
    },
    {
      title: '教练证编号',
      dataIndex: 'licenseNumber',
      hideInSearch: true,
    },
    {
      title: '教学时长',
      dataIndex: 'teachingHours',
      hideInSearch: true,
      render: (_, record) => `${record.teachingHours} 小时`,
    },
    {
      title: '入职日期',
      dataIndex: 'hireDate',
      valueType: 'date',
      hideInSearch: true,
    },
    {
      title: '操作',
      valueType: 'option',
      fixed: 'right',
      render: (_, record) => [
        <a
          key="view"
          onClick={() => {
            setCurrentCoach(record);
            setDetailVisible(true);
          }}
        >
          <EyeOutlined/> 查看
        </a>,
        <CoachForm
          key="edit"
          trigger={<a><EditOutlined/> 编辑</a>}
          initialValues={record}
          title={`编辑教练 - ${record.name}`}
          onFinish={async (values) => {
            const {data} = await updateCoachAPI({...values, id: record.id, version: record.version});
            if (data) {
              message.success('更新成功');
              actionRef.current?.reload();
            }
            return data;
          }}
        />,
        <a
          key="delete"
          style={{color: 'red'}}
          onClick={async () => {
            Modal.confirm({
              title: '确认删除',
              content: `确定要删除教练 ${record.name} 吗？`,
              onOk: async () => {
                const {data} = await deleteCoachAPI(record.id as any);
                if (data) {
                  message.success('删除成功');
                  actionRef.current?.reload();
                }
              },
            });
          }}
        >
          <DeleteOutlined/> 删除
        </a>,
      ],
    },
  ];

  return (
    <PageContainer>
      <ProTable<API.ICoach>
        columns={columns}
        actionRef={actionRef}
        request={async (params) => {
          const {data} = await pageCoachAPI(params);
          return data
        }}
        rowKey="id"
        search={{
          labelWidth: 'auto',
          span: 6,
        }}
        toolBarRender={() => [
          <CoachForm
            key="create"
            trigger={
              <Button type="primary">
                <PlusOutlined/> 新增教练
              </Button>
            }
            title="新增教练"
            onFinish={async (values) => {
              const {data} = await addCoachAPI(values);
              if (data) {
                message.success('添加成功');
                actionRef.current?.reload();
              }
              return data;
            }}
          />,
        ]}
      />

      <Modal
        title="查看教练详情"
        width={800}
        visible={detailVisible}
        onCancel={() => setDetailVisible(false)}>
        <CoachDetail
          data={currentCoach || {}}
        />
      </Modal>

    </PageContainer>
  );
};

export default CoachManager;
